<template>
	<div class="layout-padding">
		<div class="mb-20">
			<el-button type="primary" @click="handleAddClick">新增</el-button>
		</div>
		<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
			<el-table-column type="index" width="100" label="#" />
			<el-table-column prop="fileName" label="图片名称" />
			<el-table-column prop="filePath" label="图片简图">
				<template #default="scope">
					<el-image style="width: 100px; height: 100px" :src="'/api' + scope.row.filePath" />
				</template>
			</el-table-column>
			<el-table-column prop="createDate" label="发布日期" />
			<el-table-column label="操作" width="100">
				<template #default="scope">
					<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="flex-center">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="[100, 200, 300, 400]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
		<!-- 弹窗组件 -->
		<el-dialog v-model="centerDialogVisible" title="新增" width="30%" align-center>
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" :size="formSize" status-icon>
				<el-form-item label="图片名称" prop="fileName">
					<el-input v-model="ruleForm.fileName" />
				</el-form-item>
				<el-form-item label="上传图片">
					<upload-img v-model:imageUrl="ruleForm.filePath">
						<template #empty>
							<span>请上传图片</span>
						</template>
					</upload-img>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleDialogClose">关闭</el-button>
					<el-button type="primary" @click="handleFormAddClick(ruleFormRef)"> 新增 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { fetchList, delObjs, addObj } from '/@/api/coalSystem/fileInfo';
import { ElMessage } from 'element-plus';

import type { FormInstance } from 'element-plus';
const UploadImg = defineAsyncComponent(() => import('/@/components/Upload/Image.vue'));

const centerDialogVisible = ref(false);
const tableRowClassName = (rowIndex) => {
	if (rowIndex === 1) {
		return 'warning-row';
	} else if (rowIndex === 3) {
		return 'success-row';
	}
	return '';
};

const tableData = ref();
// 表格分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
onMounted(() => {
	getFetchList();
});
const getFetchList = () => {
	fetchList({
		current: currentPage.value,
		size: pageSize.value,
	})
		.then((res: any) => {
			const { code, msg, data } = res;
			if (code == 0) {
				tableData.value = data.records;
				total.value = data.total;
			} else {
				ElMessage({
					message: msg,
					type: 'warning',
				});
			}
		})
		.finally(() => {
			// loading.value = false;
		});
};
const handleSizeChange = (val: number) => {
	pageSize.value = val;
	getFetchList();
};
const handleCurrentChange = (val: number) => {
	currentPage.value = val;
	getFetchList();
};
const handleDelete = (index, row) => {
	delObjs(row.fileId).then((res) => {
		const { code, msg } = res;
		if (code === 0) {
			ElMessage({
				message: '删除成功',
				type: 'success',
			});
			centerDialogVisible.value = false;
			getFetchList();
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
	});
};
const handleAddClick = () => {
	centerDialogVisible.value = true;
};

// 表单内容逻辑

const formSize = ref('default');
const ruleFormRef = ref();
const ruleForm = ref({
	fileName: '',
	filePath: '',
});

const handleDialogClose = () => {
	ruleFormRef.value.resetFields();
	centerDialogVisible.value = false;
};
const rules = reactive({
	fileName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
});
const handleFormAddClick = (formEl) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			addObj({
				...ruleForm.value,
			}).then((res) => {
				const { code, msg } = res;
				if (code === 0) {
					ElMessage({
						message: '新增成功',
						type: 'success',
					});
					handleDialogClose();
					getFetchList();
				} else {
					ElMessage({
						message: msg,
						type: 'warning',
					});
				}
			});
		}
	});
};
</script>

<style>
.mb-20 {
	margin-bottom: 20px;
}
.el-table .warning-row {
	--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
	--el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
